<!-- 用户管理 -->
<template>
    <div class="userManagement">

        <div class="table_box">
            <tyTable :searchFlag="true"
                     :listApi="$api.getUserPage"
                     :afterList="afterList"
                     :deleteApi="$api.deleteUser"
                     :openDrawer="openDrawer" ref="tyTable">
                <template v-slot:search="{ param}">
                    <el-form-item label="用户姓名:" prop="name">
                        <el-input placeholder="请输入用户姓名" v-model="param.name" maxlength="200" clearable/>
                    </el-form-item>
                </template>

                <!--            按钮-->
                <template v-slot:search-operation>
                    <div class="header-box">
                        <el-form-item>
                            <el-button icon="el-icon-plus" type="primary"
                                       @click="openDrawer()">新增用户
                            </el-button>
                        </el-form-item>
                    </div>
                </template>

                <template v-slot:table>
                    <el-table-column type="index" label="序号" align="center" width="52"></el-table-column>
                    <el-table-column prop="username" label="登录名" align="center"></el-table-column>
                    <el-table-column prop="name" label="姓名" align="center"></el-table-column>
                    <el-table-column prop="roleName" label="所属角色" align="center"></el-table-column>
                </template>
            </tyTable>
        </div>


        <tyAddUpdate :model="formData"
                     :add-api="$api.addUser"
                     :update-api="$api.updateUser"
                     :submitBefor="submitBefor"
                     :beforeHandler="beforeHandler"
                     :dialogSize="'30%'"
        >
            <el-form label-position="left" label-width="100px" :model="formData" :rules="rules">
                <el-form-item label="名称:" prop="name">
                    <el-input v-model="formData.name" placeholder="请输入名称"  clearable
                              maxlength="300"></el-input>
                </el-form-item>
                <el-form-item label="账号:" prop="username">
                    <el-input v-model="formData.username" placeholder="请输入账号"  clearable
                              maxlength="300"></el-input>
                </el-form-item>

                <el-form-item label="密码:" v-if="formData.id" :key="0">
                    <el-input v-model="formData.password" show-password  placeholder="请输入密码"  clearable
                              maxlength="300"></el-input>
                </el-form-item>
                <el-form-item label="密码:" prop="password" v-else :key="1">
                    <el-input v-model="formData.password" show-password  placeholder="请输入密码"  clearable
                              maxlength="300"></el-input>
                </el-form-item>


                <el-form-item label="角色权限:" prop="roleIdVal">
                    <el-select v-model="formData.roleIdVal" multiple placeholder="请选择角色" @clear="setRoleId"
                               @change="setRoleId">
                        <el-option
                            v-for="item in roleList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
        </tyAddUpdate>

    </div>
</template>

<script>
import {sha256} from 'js-sha256'
import {tyAddUpdateMixins, tyConfirmMixins} from '@/mixins/addEditFormMixins'

export default {
    name: "userManagement",
    mixins: [tyAddUpdateMixins, tyConfirmMixins],
    data() {
        return {
            // 基础
            formData: {},
            rules: {
                name: [
                    {required: true, message: '请输入名称', trigger: 'blur'},
                ],
                username: [
                    {required: true, message: '请输入账号', trigger: 'blur'},
                ],
                password: [
                    {required: true, message: '请输入密码', trigger: 'blur'},
                    { min: 6,  message: '最少输入6个字符', trigger: 'blur' }
                ],
                roleIdVal: [
                    {required: true, message: '请选择角色', trigger: 'blur'},
                ],
            },
            // 配置
            roleList: []
        };
    },
    created() {
        this.queryRoleListFn();
    },
    methods: {
        afterList(list) {
            list.forEach(item => {
                if (item.roleIdJson) {
                    item.roleIdVal = JSON.parse(item.roleIdJson)
                }
                if(item.roleList){
                    item.roleName = item.roleList.map(val=>val.name).join(' , ')
                }
                item.password = null
            })
        },
        submitBefor(){
            if (this.formData.password != null && this.formData.id){
                if (this.formData.password.length < 6){
                    this.$message.warning('最少输入6个字符')
                    return false
                }
            }
            return  true
        },
        beforeHandler(model){
            model.password = sha256(String(model.password))
        },
        //
        setRoleId(val) {
            this.formData.roleIdJson = JSON.stringify(val)
        },
        queryRoleListFn() {
            this.$api.queryRoleList().then(res => {
                this.roleList = res
            })
        },


    },


};
</script>

<style lang="scss" scoped>
.userManagement {
    box-sizing: border-box;
    height: 100%;
    width: 100%;

    ::v-deep .el-table {
        width: 100%;

        .el-table__header-wrapper table, .el-table__body-wrapper table {
            width: 100% !important;
        }

        .el-table__body, .el-table__footer, .el-table__header {
            table-layout: auto;
        }
    }

    .lm-tree-box {
        width: 260px;
        height: calc(100vh - 200px);
        overflow-y: auto;
    }

    ::v-deep .el-table__body-wrapper {
        // max-height: calc(100vh - 340px);
        //overflow-y: auto;
    }


    .table_box {
        box-sizing: border-box;

        .el-table__header {
            line-height: 0;
        }

        .el-table th.el-table__cell > .cell {
            text-align: center;
        }

        .el-table td.el-table__cell div {
            text-align: center;
        }
    }

}
</style>
